<template>
  <div class="cartList">
    <!-- 1. 间隔槽-->
    <gap-comp :height="0"></gap-comp>
    <!-- 无数据 -->
    <van-empty description="暂无数据！" v-if="cartList.length == 0" />
    <!-- 有数据 -->
    <!-- 购物车列表区域 -->
    <div v-else>
      <van-swipe-cell v-for="item in cartList" :key="item.id">
        <van-card
          :price="item.price"
          desc="描述信息"
          :title="item.goodsname"
          class="goods-card"
          :thumb="$pre + item.img"
          centered
        >
          <!-- 左侧状态区域 -->
          <template #tags>
            <van-checkbox
              v-model="item.status"
              checked-color="#FF6040"
              @click="changeOne"
            ></van-checkbox>
          </template>
          <!-- 右下角数量操作区域 -->
          <template #num>
            <van-stepper v-model="item.number" min="1" max="10" />
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            color="#FF6040"
          />
        </template>
      </van-swipe-cell>
      <!-- 间隔槽 -->
      <gap-comp :height="5" bg="#DDD"></gap-comp>
      <van-submit-bar button-text="提交订单" @submit="onSubmit">
        <van-checkbox
          checked-color="#FF6040"
          v-model="allStatus"
          @click="changeAll"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uid: this.$utils.getUid(),
      cartList: [], //购物车数据
      allStatus: true, //全选的初始状态
    };
  },
  // 使用计算属性统计支付金额和购买的商品数量
  computed: {},
  mounted() {
    this.getCartList();
  },
  methods: {
    // 1.获取购物车数据
    getCartList() {
      this.$api
        .reqCartList({ uid: this.uid })
        .then((res) => {
          console.log(res);
          this.cartList = res;
          // 处理每条记录中的status值 number ==>bool
          this.cartList.forEach((item) => {
            item.status = true;
          });
        })
        .catch((err) => console.log(err));
    },
    // 2.单选操作
    changeOne() {
      this.allStatus = this.cartList.every((item) => item.status);
    },
    // 3.全选反选
    changeAll() {
      this.cartList.forEach((item) => (item.status = this.allStatus));
    },
    // 6.提交确认订单
    onSubmit() {},
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/less/cart.less";
</style>
